import React from 'react';
import ReactDOM from 'react-dom';

function App1() {
  function fn(a) {
    console.log(a, 666)
  }
  return <>
    <button onClick={fn.bind(null, 88)}>CCC</button>
    <button onClick={() => { fn(88) }}>CCC</button>
    <button onClick={fn}>CCC</button>

  </>
}
class App2 extends React.Component {
  // constructor() {
  //   super()
  //   this.fn3 = () => {
  //     console.log(this)
  //   }
  // }
  fn(a, e) {
    // 要保证this是当前实例
    console.log(a, 666, e)
  }
  fn3 = () => {
    console.log(this)
  }
  render() {
    // this是当前组件实例
    // 箭头函数 没有this合arguments;你就把箭头函数中的this合arguments当作普通变量对待即可
    console.log(this)
    let a = 100;
    return <div className=''>
      <button onClick={this.fn.bind(this, a)}>按钮1</button>
      <button onClick={(e) => { this.fn(a, e, e, e, 34) }}>按钮2</button>
      <button onClick={this.fn3}>按钮3</button>
    </div>;
  }
}

ReactDOM.render(<>
  {/* <App1 className="box111"></App1> */}
  <App2 className="box222"></App2>
</>, document.getElementById('root'))